import React from 'react'
import { Form, Input, Modal, Button, Select, message} from 'antd'
import PropTypes from 'prop-types'
import './goods.less'
import API from '../../api/Goods/goods'
const FormItem = Form.Item
// const Search = Input.Search
const Option = Select.Option

// const Search = Input.Search

class IcsComponentsSupplierFilterForm extends React.Component {
    state = {
        audit_status:[
            {value:1, name: '待审核'},
            {value:10, name: '审核通过'},
            {value:20, name: '审核拒绝'}
        ],
        visible: false,
        store_status:[
            {value:1, name: '开业'},
            {value:0, name: '未开业'}
        ],
        allClassifyList: []
    }
    componentDidMount () {

    }
    componentWillReceiveProps (nextProps) {
        if ('allClassifyList' in nextProps && nextProps.allClassifyList) {
            this.setState({allClassifyList: nextProps.allClassifyList})
        }
        if ('rowInfo' in nextProps && nextProps.rowInfo) {
            console.log(nextProps.rowInfo)
            this.setState({ rowInfo: nextProps.rowInfo})
            let arr = []
            nextProps.allClassifyList.forEach(v => {
                if (v.id !== nextProps.rowInfo.id) {
                    arr.push(v)
                }
            })
            this.setState({allClassifyList: arr})
        }
    }
    onCancel = () => {
        this.props.doViewer()
    }
    handleSearch = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (err) return

            if (this.props.isEditing) {
                values.cat_id = this.props.rowInfo.id
                this.editData(values)
            } else {
                this.addData(values)
            }
        });
    }
    addData = (values) => {
        API.createCat(values).then(res => {
            if (res.error === 0) {
                message.success('添加成功！')
                this.props.doViewer()
                this.props.doSearch()
            } else {
                message.error(res.msg || '添加失败！')
            }
        })
    }
    editData = (values) => {
        API.editCat(values).then(res => {
            if (res.error === 0) {
                message.success('编辑成功！')
                this.props.doViewer()
                this.props.doSearch()
            } else {
                message.error(res.msg || '编辑失败！')
            }
        })
    }
    render () {
        const { getFieldDecorator } = this.props.form
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 17 },
            },
        }
        return <Modal
            className="store-viewer"
            style={{width: 600}}
            visible={this.props.showCatViewer}
            title={this.props.isEditing ? "编辑品类" : "创建品类"}
            onCancel={this.onCancel}
        >
            <Form
                layout="inline"
                className="supplier-filter"
                onSubmit={this.handleSearch}>
                <FormItem
                    {...formItemLayout}
                    label="品类名称">
                    {getFieldDecorator('cat_name', {
                        rules: [{
                            required: true, message: '请填写品类名称!',
                        }],
                        initialValue: this.state.rowInfo? this.state.rowInfo.cat_name : ''
                    })(
                        <Input />
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="归属商城">
                    {getFieldDecorator('store_type', {
                        rules: [{
                            required: true, message: '请选择归属商城!',
                        }],
                        initialValue: this.state.rowInfo? this.state.rowInfo.store_type : ''
                    })(
                        <Select allowClear placeholder="请选择" dropdownMatchSelectWidth={false}>
                            <Option value="1">商城1</Option>
                        </Select>
                    )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="上级品类">
                    {getFieldDecorator('parent_id', {
                        initialValue: this.state.rowInfo? this.state.rowInfo.parent_id : ''
                    })(
                        <Select placeholder="请选择" dropdownMatchSelectWidth={false}>
                            {this.state.allClassifyList && this.state.allClassifyList.map(v => <Option value={v.id} key={v.id}>{v.cat_name}</Option>)}
                        </Select>
                    )}
                    <span style={{color: '#999'}}>上级品类不选择，则默认该品类为顶级品牌</span>
                </FormItem>
                <div className="btns">
                    <Button type="primary" style={{marginRight: 10}} onClick={this.onCancel}>取消</Button>
                    <Button type="primary" htmlType="submit">提交</Button>

                </div>

            </Form>
        </Modal>
    }
}

IcsComponentsSupplierFilterForm.propTypes = {
    getFieldDecorator: PropTypes.func,
    showCatViewer: PropTypes.any,
    doViewer: PropTypes.func,
    rowInfo: PropTypes.object,
    isEditing: PropTypes.bool,
    doSearch: PropTypes.func,
    allClassifyList: PropTypes.array,
    form: PropTypes.object
}

const IcsComponentsSupplierFilter = Form.create()(IcsComponentsSupplierFilterForm)

export default IcsComponentsSupplierFilter
